


<template>
    <div style="display: flex" class="tempxyz menmuStyle">
        <CCard class="rightCard">
            <CCardHeader class="header-wraper">
                <div class="header-left-titleWraper">
                    <span class="textTitle">日志管理</span>
                </div>
                <div class="header-right-wraper">
                    <p class="service">服务</p>
                    <Select v-model="selecetService" style="width:200px" placeholder="请选择服务" class="headerMar" @on-change="getResourceList">
                        <Option v-for="item in serviceList" :value="item" :key="item.id">{{ item.serviceName }}</Option>
                    </Select>
                    <p class="service">资源</p>
                    <Select v-model="selectResource" style="width:250px" placeholder="请选择资源" class="headerMar">
                        <Option v-for="item in resourceList" :value="item" :key="item.podName">{{ item.podName }}</Option>
                    </Select>
                    <p class="service">条数</p>
                        <input v-model="logSize" type="text" placeholder="默认1000" class="logNumberStyle">
                    <p class="service">时间范围</p>
                    <el-date-picker
                        v-model="startTime"
                        type="datetime"
                        maxlength="100"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="开始时间"
                        style="width: 190px" 
                        class="headerMar">
                    </el-date-picker>
                    <p class="service">-</p>
                    <el-date-picker
                        v-model="endTime"
                        type="datetime"
                        maxlength="100"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="结束时间"
                        style="width: 190px" 
                        class="headerMar">
                    </el-date-picker>
                    <Button type="primary"  @click="queryLog()" class="system-btn-style headerMar">
                        <Icon type="ios-search" />&nbsp;查询
                    </Button>
                    <!-- <Button type="primary" class="system-btn-style headerMar">
                        <Icon type="ios-print-outline" />&nbsp;导出
                    </Button> -->
                </div>
            </CCardHeader>
            <CCardBody  class="card-body">
                <div v-for="item in logQuery" :key="item">
                    <div style="height: calc(100% - 46px)">
                        {{item}}
                    </div>
                </div>
            </CCardBody>
        </CCard>
    </div>
</template>

<script>

    import TableList from "@/template/table/TableList";

    export default {
        name: "logManagement",
        data() {
            return {
                hhh:[1,2],
                logQuery:"",
                delShow: false,
                checkTask: "false",
                serviceList: [],//记录服务列表
                selecetService: {
                    serviceName:"",
                    id:"",
                },//选择的服务
                selecetServiceId: "",//选择的服务id
                resourceList: [],//对应的资源列表
                selectResource: {
                    podName:"",
                    namespace:""
                },//选择的资源

                serviceName: "",//服务名
                resourceName: "",//资源名
                namespace: "",//资源的命名空间
                startTime: "",//开始时间
                endTime: "",//结束时间
                logSize: 1000,//日志条数，默认1000
                flag: 0,//服务名->1   资源名->0

                getAxios: {
                    // url: this.$api.monitorApi.getServiceLis, //请求路径
                    method: "get", //请求方式
                    dataList: {}, //请求参数
                },
            };
        },
        mounted() {
            this.getService();
        },
        methods: {
            //获取全部服务
            getService(){
                let path = this.$api.monitorApi.getServiceLis;
                this.http.get(path).then((res)=>{
                    if(res.data.code == 0){
                        this.serviceList = res.data.data.serviceList;
                    }
                })
            },
            //获取资源列表
            getResourceList(){
                this.selecetServiceId = this.selecetService.id;
                this.resourceList = "";//清空操作
                let path = this.$api.monitorApi.getReplicaList + "?id=" + this.selecetServiceId;
                this.http.get(path).then((res)=>{
                    if(res.data.code == 0){
                        this.resourceList = res.data.data.replicaList;
                    }
                })
            },
            //查询
            queryLog(){
                this.logQuery = ["正在查询，请稍后~"];
                // this.$Message.info("正在查询，请稍后~");
                //获取服务名字
                this.serviceName = this.selecetService.serviceName;

                //获取命名空间 和 资源名
                //当资源名不选 且 资源列表不为空 时  默认第一个资源
                if(this.selectResource.podName){
                    this.resourceName = this.selectResource.podName;
                    this.namespace = this.selectResource.namespace;
                }else{
                    if(this.resourceList.length != 0){
                        this.resourceName = this.resourceList[0].podName;
                        this.namespace = this.resourceList[0].namespace;
                    }else{
                        this.resourceName = "";
                        this.namespace = "";
                    }
                }

                //判断是否选择了服务
                if(!this.serviceName){
                    this.$Message.warning("请选择服务！");
                    return;
                }

                //条数默认值1000
                //如果自定义需要判断值
                if(this.logSize == "" || this.logSize == null){
                    this.logSize = 1000;
                }
                if(this.logSize < 1){
                    this.$Message.warning("查询条数不得小于1！")
                    return;
                }
                if(this.logSize > 10000){
                    this.$Message.warning("查询条数不得大于10000！")
                    return;
                }

                //开始时间、结束时间
                //要么都不选   要么都选
                if (this.endTime && !this.startTime) {
                    this.$Message.warning("请选择开始时间！");
                    return;
                }
                if (this.startTime && !this.endTime) {
                    this.$Message.warning("请选择结束时间！");
                    return;
                }

                // 如果选了开始时间就做判断
                if(this.startTime && this.endTime){
                    let startTimeStamp = Date.parse(this.startTime);
                    let endTimeStamp = Date.parse(this.endTime);

                    let differ = (endTimeStamp - startTimeStamp) / 1000; //两个时间的差值，单位为秒
                    if (differ < 0) {
                        this.$Message.warning("结束时间必须大于开始时间");
                        return;
                    }
                }

                // 判断资源是不是为空
                let selectName = "";
                if(this.resourceName){
                    selectName = this.resourceName;
                    this.flag = 0;
                }else{
                    selectName = this.serviceName;
                    this.flag = 1;
                }

                let path = this.$api.monitorApi.getLogList;
                let params = {
                    name: selectName,
                    namespace: this.namespace,
                    startTime: this.startTime,
                    endTime: this.endTime,
                    size: this.logSize,
                    flag: this.flag
                }
                console.log(params);
                this.http.get(path,params).then((res)=>{
                    if(res.data.success == true){
                        this.$Message.info("查询成功！");
                        if(res.data.data.length != 0){
                            this.logQuery = res.data.data;
                        }else{
                            this.logQuery = ["暂无日志"];
                        }
                    }else{
                        this.$Message.warning("查询失败");
                    }
                })

            },

            selectionChange(data) {
                // 选中的数据
            }
        },

    };
</script>

<style scoped>
    .rightCard {
        width: 80%;
        flex: 1;
    }

    .leftCard {
        width: 18%;
    }
    /deep/.card {
        margin-bottom: 0;
    }
    .headerMar{
        margin-left: 10px;

    }
    .logNumberStyle{
        margin-left: 10px;
        width: 70px;
        height: 30px;
        border-color: #DDDDDD;
    }
    .service{
        margin-top: 20px;
        margin-left: 5px;
        font-size: 15px;
    }

</style>
